<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item1">
				<view class="text"> <text>*</text>客户: </view>
				<view class="input">
					<input v-model="user" type="text" placeholder="请输入客户名称" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> 联系电话: </view>
				<view class="input">
					<input v-model="phone" type="text" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> 地址: </view>
				<view class="input">
					<input v-model="address" type="text" placeholder="请输入地址" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> 客户类型:</view>
				<view class="input">
					<!-- <input v-model="usertype" type="text" placeholder="请输入客户类型" /> -->
					<Select @confirm="confirm" :type="type" class="Select" />
					<!-- <select v-model="type" name="" id="">
            <option value="0">普通</option>
            <option value="1">VIP</option>
          </select> -->
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view @tap="del" class=""> 删除 </view>
			<view @tap="reset" class=""> 重置表单 </view>
		</view>
		<view @tap="submit" class="del"> 点我提交 </view>
	</view>
</template>

<script>
	import Select from "@/components/select.vue";
	export default {
		data() {
			return {
				user: "",
				phone: "",
				address: "",
				id: "",
				usertype: "4",
				type: "",
				cusTel: "",
			};
		},
		components: {
			Select,
		},
		methods: {
			confirm(e) {
				this.type = e
			},
			reset() {
				this.user = "";
				this.phone = "";
				this.address = "";
				this.usertype = "";
			},
			submit() {
				if (
					this.user == ""
				) {
					uni.showToast({
						title: "输入客户",
						icon: "none",
					});
				} else {
					this.$api
						.customerEditApi({
							cname: this.user,
							cusAddress: this.address,
							cusMobile: this.phone,
							cusTel: this.cusTel,
							id: this.id,
							cusTypeNo: this.type,
						})
						.then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "提交成功",
									icon: "none",
								});
								uni.navigateBack()
								// uni.navigateTo({
								//   url: "/pages/customer/index",
								// });
							}
						});
				}
			},
			del() {




				let that = this
				uni.showModal({
					content: "确定要删除吗？",
					success(res) {
						// console.log(res)
						if (res.confirm) {

							that.$api.customerDelApi({
								id: that.id
							}).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: "删除成功",
										icon: "none",
									});
									uni.navigateBack()
									// uni.navigateTo({
									//   url: "/pages/customer/index",
									// });
								}
							});
						}
					}
				})


			},
		},
		onLoad(option) {
			// console.log(option);
			this.user = option.cname;
			this.address = option.cusAddress || '无';
			this.phone = option.cusMobile || option.cusTel || 0;
			this.id = option.id;
			this.type = option.cusTypeNo;
			// console.log(option.cusTypeNo);
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.newOrder {
		background-color: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;
			// margin-top: 38rpx;

			.form_item1 {
				display: flex;
				align-items: center;
				color: #bdbdbd;
				margin-bottom: 36rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;
					text-align: right;
					width: 30%;

					text {
						color: #fe3430;
					}
				}

				select {
					text-indent: 1em;
					height: 94rpx;
					width: 100%;
					color: #000;
					background: #f2f2f2;
					border-radius: 47rpx;
					text-indent: 1em;
					border: none;
					padding-right: 20rpx;
				}

				.input {
					display: flex;
					align-items: center;
					text-indent: 1em;
					flex: 1;

					.note {
						width: 613rpx;
						height: 181rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
					}

					.Select {
						color: #000;
						height: 94rpx;
						line-height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					input {
						color: #000;
						height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					button {
						width: 73rpx;
						height: 38rpx;
						background: #fe3430;
						border-radius: 49rpx;
						color: #fff;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.footer_btn {
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;

			view {
				background-image: url("/static/images/Registration/button.png");
				background-size: 280rpx 123rpx;
				color: #fff;
				width: 280rpx;
				height: 123rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 49rpx;
			}
		}

		.del {
			background-image: url("/static/images/long.png");
			background-size: 625rpx 123rpx;
			color: #fff;
			width: 625rpx;
			height: 123rpx;
			line-height: 100rpx;
			text-align: center;
			margin: 50rpx auto;
			// border-radius: 49rpx;
		}
	}
</style>
